详细介绍async await 含义,使用,原理

您所在的位置：网站首页 › async await怎么使用 › 详细介绍async await 含义,使用,原理

详细介绍async await 含义,使用,原理

#详细介绍async await 含义,使用,原理| 来源: 网络整理| 查看: 265

一、含义

async 函数就是将 Generator 函数的星号（*）替换成 async,将 yield 换成await （1）内置执行器。Generator 函数的执行必须靠执行器(co模块),async函数自带执行器（2）更好的语义。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。（3）更广的适用性。co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象。async函数的await命令+，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）（4）返回值是 Promise。比 Generator 函数的返回值是 Iterator 对象方便，用then方法指定下一步的操作。async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖

二、基本用法

1. async 函数 :异步操作（1）立刻返回一个promise对象（2）可以使用then方法

2. 遇到await：紧跟promise包装的对象（1）先返回（2）等异步操作结束完成后,再继续执行函数体内后面的语句

//指定多少毫秒输出一个值 function timeout(ms){ return new promise((resolve)=>{ setTimeout(resolve,ms); }) } async function asyncPrint(value,ms){ await timeout(ms); console.log(ms); } asyncPrint('hello world',50); //由于async函数返回的是promise，所以整体也可当作await 后续的表达式，timeout改写为如下 async function timeout(ms){ await new promise((resolve)=>{ setTimeout(resolve,ms); }) }

3. async 多种使用形式

//函数声明 async function foo(){} //函数表达式 const foo = async function(){} //对象 let obj = {async foo(){}} obj.foo().then(...) //class class Storage { constructor() { this.cachePromise = caches.open('avatars'); } async getAvatar(name) { const cache = await this.cachePromise; return cache.match(`/avatars/${name}.jpg`); } } const storage = new Storage(); storage.getAvatar('jake').then(…); //箭头函数 const foo = async () => {} ```javascript 在这里插入代码片

4. 调用async函数返回Promise对象（1）async函数内部return语句返回的值，会成为then方法回调函数的参数

async function f() { return 'hello world'; } f().then(v => console.log(v)) // "hello world"

(2) async函数内部抛出错误,返回的 Promise 对象变为reject状态,抛出的错误对象会被then中catch方法回调函数接收到

async function f() { throw new Error('出错了'); } f().then( v => console.log('resolve', v), e => console.log('reject', e) ) //reject Error: 出错了

5. Promise 对象的状态变化（1）只有async函数内部的异步操作执行完，遇到return语句或者抛出错误，才会执行then方法指定的回调函数

6. await命令（1）await + Promise对象：返回该对象的结果（2）await + 原始值：返回原始值

async function f() { // 等同于 // return 123; return await 123; } f().then(v => console.log(v)) // 123

（3）await + thenable对象：（即定义了then方法的对象）等同于 Promise 对象（4）await命令后面的 Promise 对象如果变为reject状态，则reject的参数会被catch方法的回调函数接收到，整个async函数都会中断执行

async function f() { await Promise.reject('出错了'); } f() .then(v => console.log(v)) .catch(e => console.log(e)) // 出错了 async function f() { await Promise.reject('出错了'); await Promise.resolve('hello world'); // 不会执行 } //如果出错了不想中断，将第一个await放在try...catch结构里面，或者await Promise.catch async function f() { try { await Promise.reject('出错了'); } catch(e) { } //或者 await Promise.reject('出错了') .catch(e => console.log(e)); return await Promise.resolve('hello world'); } f() .then(v => console.log(v))

7. 错误处理（1）await + Promise(rejected) , 等同于async函数返回的 Promise 对象被reject

//防止出错的方法，也是将其放在try...catch代码块之中 async function f() { try { await new Promise(function (resolve, reject) { throw new Error('出错了'); }); } catch(e) { } return await('hello world'); } //多个await命令，可以统一放在try...catch结构中 async function main() { try { const val1 = await firstStep(); const val2 = await secondStep(val1); const val3 = await thirdStep(val1, val2); console.log('Final: ', val3); } catch (err) { console.error(err); } }

8. 实现一个多次重复尝试

const superagent = require('superagent'); const NUM_RETRIES = 3; async function test() { let i; for (i = 0; i await superagent.get('http://google.com/this-throws-an-error'); break; } catch(err) {} } console.log(i); // 3 } test();

9. 注意点（1）await命令后面的Promise对象，运行结果可能是rejected，所以最好把await命令放在try…catch代码块中

async function myFunction() { try { await somethingThatReturnsAPromise(); } catch (err) { console.log(err); } } // 另一种写法 async function myFunction() { await somethingThatReturnsAPromise() .catch(function (err) { console.log(err); }); }

（2）多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发，会缩短程序的执行时间

// 写法一 let [foo, bar] = await Promise.all([getFoo(), getBar()]); // 写法二 let fooPromise = getFoo(); let barPromise = getBar(); let foo = await fooPromise; let bar = await barPromise;

（3）await命令只能用在async函数之中，如果用在普通函数，就会报错（4）async 函数可以保留运行堆栈

三、async函数的实现原理

（1）Generator+自动执行器函数

//实现如下async函数 async function fn(args){ ... } //等同于 function fn(args){ return spawn(function *(){//spawn函数就是自动执行器 //... }) } function spawn(genF){ //genF是一个Generator函数 return new Promise(function(resolve,reject){ const gen = genF();//gen第一次执行返回一个遍历器对象,递归调用遍历器对象gen.next()方法直到返回ture结束 function step(nextF){ let next; try{ next = nextF()//第二次执行调用gen.next()方法返回{value: ,done:} }catch(e){ return reject(e) } if(next.done){//为true返回 return resolve(next.value) } //继续执行 Promise.resolve(next.value).then(function(v){ step(function(){return gen.next(v);}); },function(e){ step(function(){return gen.throw(e)}) }); } step(function(){return gen.next(undefined)})//传入第二次 }); }

【本文地址】

详细介绍async await 含义,使用,原理

详细介绍async await 含义,使用,原理

今日新闻

推荐新闻